<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例列表</title>
    <link rel="stylesheet" href="anli-list.css">
    <link rel="stylesheet" href="reset.css">
    <style>
        a {
            color: #a0a0a0;
            text-decoration: none;
        }
        
        a:hover {
            color: #ffffff;
        }
    </style>
</head>

<body>
    <header>

        <div class="head-con">
            <img src="img/index-cy.png" alt="" class="logo">
            <ul class="left">
                <a href="index.html">
                    <li>网站首页</li>
                </a>

                <li>传悦资源</li>

                <a href="anli-list.html" class="foucs">
                    <li>传悦案例</li>
                </a>



                <li>传悦服务</li>
                <a href="fangan-list.html">
                    <li>解决服务</li>
                </a>

                <li>需求提交</li>
            </ul>
            <ul class="right">
                <li><img src="img/index-phone.png" alt=""></li>
                <li>
                    <p>0535-60652189</p>
                </li>
                <li><img src="img/love_03.jpg" alt=""></li>
                <li><img src="img/love_05.jpg" alt=""></li>
                <li><img src="img/love_07.jpg" alt=""></li>
                <li><img src="img/love_09.png" alt=""></li>
            </ul>
        </div>
    </header>
    <div class="top">
        <img src="img/案例列表头部.png" alt="">
        <div class="top-b">
            <p> <span>网站首页</span>
                <span>>传悦案例</span></p>

        </div>
    </div>


    <div class="concent">

        <ul class="top1">
            <li class="foucs">全部</li>
            <li>网站建设</li>
            <li>推广运营</li>
            <li>品牌策划</li>
            <li>网络全案</li>
        </ul>
        <ul class="cont">

            <li class="oli" id="temp">
                <a href=""> <img src="" alt="" class="img1">
                    <h5 class="title"></h5>
                    <h6 class="text"></h6>
                </a>

            </li>

        </ul>
        <ul class="bottom">
            <li>
                < </li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>></li>
        </ul>
    </div>
    <footer>
        <div class="footer-con">
            <img src="img/logo-dm_03.jpg" alt="">
            <ul class="ul1">
                <li>关于传悦</li>
                <li>新闻动态</li>
                <li>传悦观点</li>
                <li>联系传悦</li>
                <li>传悦观点</li>
                <li>联系传悦</li>
            </ul>
            <ul class="ul2">
                <li>Copyright &2013</li>
                <li>创梦网络科技责任有限公司</li>
                <li>||</li>
                <li>传悦 Chnyoo.cn ALL Rights Reserved</li>
                <li>京ICP备12005221号</li>
            </ul>
        </div>
    </footer>
</body>

</html>
<script>
    let http = new XMLHttpRequest();
    let oLi = document.querySelector(".oli") //模板
    let oUl = document.querySelector(".cont") //父元素
        // 读取数据库中数据
    http.open("get", `http://10.35.164.119:81/anlist`)
    http.send()
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let anlist = JSON.parse(http.responseText)
            anlist.forEach(function(item) {
                let newli = oLi.cloneNode(true);
                newli.id = "";
                oUl.appendChild(newli);
                // 对数据
                newli.querySelector(".img1").src = item.img;
                newli.querySelector(".title").innerHTML = item.title;
                newli.querySelector(".text").innerHTML = item.text;
                newli.setAttribute("data-id", item.id);
                newli.querySelector("a").href = `anli详情.html?id=${item.id}`
            })
        }
    }
</script>